<template>
  <div class="side-left column">
    <div class="user-box center column">
      <el-avatar
        :size="80"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      ></el-avatar>
      <span class="username">{{ userInfo.userName }}</span>
      <span class="tip">Welcome Back！</span>
      <div class="btns row center">
        <el-button
          icon="el-icon-edit-outline"
          @click="menuChange(0)"
          circle
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-switch-button"
          circle
          @click="logout"
        ></el-button>
      </div>
    </div>
    <div class="column">
      <div
        v-for="(item, index) in menuContentFilter"
        :key="index"
        :class="{ 'menu-is-active': menuIndex == item.index }"
        @click="menuChange(item.index)"
        class="menu-item column center"
      >
        <i :class="[item.icon]" class="font28"></i>
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftMenu",
  props: {
    menuIndex: Number,
    menuContent: {
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
  },
  model: {
    prop: "menuIndex",
    event: "changeIndex",
  },
  mounted() {
    var leftContent = this.menuContent.filter((item) => {
      // console.log(
      //   "item.roles.indexOf(this.userInfo.role)",
      //   item.roles.indexOf(this.userInfo.role),
      //   item.roles,
      //   this.userInfo.role
      // );
      return item.roles.indexOf(this.userInfo.role) != -1;
    });
    console.log("左侧导航内容：", leftContent);
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
    menuContentFilter() {
      return this.menuContent.filter((item) => {
        return item.roles.indexOf(this.userInfo.role) != -1;
      });
    },
  },
  methods: {
    menuChange(index) {
      this.$emit("changeIndex", index);
    },
    logout() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          localStorage.removeItem("userInfo");
          this.$router.push("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
  },
};
</script>

<style scoped>
.side-left {
  width: 180px;
  /* height: 230px; */
  background-color: #eaedf2;
  margin-right: 40px;
  box-sizing: border-box;
  /* overflow-y: scroll; */
}
.side-left .user-box {
  padding: 30px 0;
}
.side-left .user-box .username {
  font-size: 16px;
  color: #343739;
  margin: 15px 0 10px 0;
}
.side-left .user-box .tip {
  color: #868e98;
  font-size: 12px;
  margin-bottom: 22px;
}
.menu-item {
  height: 96px;
  font-size: 14px;
  box-sizing: border-box;
}
.menu-item i {
  margin-bottom: 10px;
}
/* 激活状态 */
.menu-is-active {
  color: #fff;
  background-color: green;
  border-left: 3px solid #286eb5;
}
.menu-item:hover {
  color: #fff;
  background-color: green;
  border-left: 3px solid #286eb5;
}
</style>